<template>
  <div style="height: 100%; width: 100%">
    <el-form :rules="rules" ref="loginForm" :model="loginForm"  class="LoginContainer">
      <h3 class="loginTitle">系统登录</h3>
    <el-form-item prop="username">
      <el-input v-model="loginForm.username" placeholder="请输入用户名" type="text"></el-input>
    </el-form-item>

      <el-form-item prop="password">
        <el-input v-model="loginForm.password" placeholder="请输入密码" type="password"></el-input>
      </el-form-item>


      <el-button type="primary" style="width: 100%;" @click="submit"> 登录</el-button>

      </el-form>
  </div>
</template>

<script>
  export default {
    name:"Login",
    captchUrl:'',
    data(){
      return{
       loginForm:{
         username:'',
         password:'',
       },
       rules:{
        username:[{required:true,message:"请输入用户名",trigger:blur}],
        password:[{required:true,message:"请输入密码",trigger:blur}],

       },
       account:{
         aid:null
       }
      }
    },
  methods:{
   submit() {
    this.$refs.loginForm.validate((data) => {
      console.log(data)
    if (data) {
      var str=this.getFormString(this.loginForm)
      this.$axios.post("/login", str).then(resp=>{
      console.log(resp.data)
      if(resp.data.code=="200"){
        sessionStorage.setItem("aid",window.JSON.stringify(resp.data.data))
        this.$router.push("/main")
      }

    })
    } else {
         this.$message.error('请输入账号或密码！')
         return false;

       }
     })
    },
    getFormString(user){
      var str="username="+user.username+"&password="+user.password
      return str;
    }
  }
}
</script>

<style>
  .LoginContainer{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 380px;
    background: #FFFFFF;
    padding: 15px 35px 15px 35px;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  .loginTitle {
    margin: 0 auto 40px auto;
    text-align: center;
  }
  .remember{
    text-align: left;
    margin: 0px 0px 15px 0px;
  }
</style>
